<template>
  <div>
    <!--订单详情框  -->
    <el-dialog title="订单详情" :visible.sync="ordersForm">
      <el-form :model="updataform">
        <el-form-item label="订单id:">
          <span v-text="updataform.order_id" autocomplete="off"></span>
        </el-form-item>
        <el-form-item label="用户id:">
          <span v-text="updataform.user_id" autocomplete="off"></span>
        </el-form-item>
        <el-form-item label="订单数量:">
          <span v-text="updataform.order_number" autocomplete="off"></span>
        </el-form-item>
        <el-form-item label="订单价格:">
          <span v-text="updataform.order_price" autocomplete="off"></span>
        </el-form-item>
        <el-form-item label="订单支付方式:">
          <span v-text="updataform.order_pay" autocomplete="off"></span>
        </el-form-item>
        <el-form-item label="是否发货:">
          <span v-text="updataform.is_send" autocomplete="off"></span>
        </el-form-item>
        <el-form-item label="公司名称:">
          <span
            v-text="updataform.order_fapiao_company"
            autocomplete="off"
          ></span>
        </el-form-item>
        <el-form-item label="发票内容:">
          <span
            v-text="updataform.order_fapiao_content"
            autocomplete="off"
          ></span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="ordersForm = false">关闭</el-button>
      </div>
    </el-dialog>
    <!--内容显示  -->
    <el-table :data="tableData" stripe>
      <el-table-column prop="order_id" label="订单id"> </el-table-column>
      <el-table-column prop="user_id" label="用户id"> </el-table-column>
      <el-table-column prop="order_number" label="订单数量"> </el-table-column>
      <el-table-column prop="order_price" label="订单价格"> </el-table-column>
      <el-table-column prop="order_pay" label="订单支付方式"> </el-table-column>
      <el-table-column prop="is_send" label="是否发货"> </el-table-column>
      <!-- <el-table-column prop="order_fapiao_company" label="公司名称">
      </el-table-column> -->
      <!-- <el-table-column prop="order_fapiao_content" label="发票内容">
      </el-table-column> -->
      <el-table-column label="查看订单详情">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            title="查看详情"
            circle
            @click="ordersdetail(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页按钮 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "VueOrders",

  data() {
    return {
      tableData: [],
      pagenum: 1,
      pagesize: 5,
      total: 0,
      ordersForm: false,
      updataform: {},
    };
  },

  methods: {
    ordersdetail(updata) {
      this.updataform = updata;
      this.ordersForm = true;
    },

    async getorders(pagenum = 1, pagesize = 3) {
      var { data } = await this.$axios.get(
        `/orders?pagenum=${pagenum}&pagesize=${pagesize}`
      );
      if (data.meta.status == 200) {
        console.log(data);
        this.tableData = data.data.goods;
        this.total = data.data.total;
        this.pagenum = data.data.pageNum;
      }
    },
    async handleSizeChange(pagesize) {
      this.pagesize = pagesize;
      this.getorders(1, pagesize);
    },

    async handleCurrentChange(pagenum) {
      this.getorders(pagenum, this.pagesize);
    },
  },
  async mounted() {
    this.getorders(1, this.pagesize);
  },
};
</script>

<style lang="scss" scoped>
</style>